<template>
  <div class="desc_index_background">
    <van-nav-bar :title="chat.chat_name" left-arrow @click-left="onClickLeft"/>
    <!-- 消息 -->
    <div class="message_list">
        <div id="msg" class="message_show" v-for="(item,i) in message_list" :key="i">
        <!-- 发送者 -->
        <div v-if="!item.id">
          <img
            :src="item.avatar_url"
            class="send_message_avatar_url"
          >
          <div class="send_message_user_desc">
            <div class="send_message_user_nickname">
              {{ item.nickname }}
            </div>
            <div class="send_message_content">
              {{ item.content }}
            </div>
          </div>
        </div>
        <!-- 接收 -->
        <div id="msg" v-else>
          <img
            :src="item.avatar_url"
            class="message_avatar_url"
          >
          <div class="message_user_desc">
            <div class="message_user_nickname">
              {{ item.nickname }}
            </div>
            <div class="message_content">
              {{ item.content }}
            </div>
          </div>
        </div>

      </div>
      <div id="msg_bottom">

      </div>
    </div>
    
    <div class="message_send">
      <van-field
          v-model="message"
          rows="1"
          autosize
          type="textarea"
          maxlength="256"
        >
        <template #button>
          <van-button
            round 
            block 
            color="linear-gradient(to right, #ff8360, #ee0a24)" 
            size="small"
            style="float: right;"
            @click="Send_message"
          >
            发送
          </van-button>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
import { onClickLeft,datetime } from "../../utlis/utils";
export default {
  data() {
    return {

      onClickLeft,
      datetime,

      chat: this.$route.query,

      message_list:[],
      message:null,
      user: {},

      websocket: null,
    };
  },
  mounted(){
      let user = localStorage.getItem('user_list');
      this.user = JSON.parse(user);
      this.initWebSocket();
      console.log(this.chat)
      console.log(this.user)
      console.log(this.websocket)

      // 获取消息
      let chat_message = localStorage.getItem("chat_" + this.chat.chat_id)
      if(chat_message){
        this.message_list = JSON.parse(chat_message)
        console.log("数据",this.message_list)
      }
    
  },
  // 销毁
  destroyed(){
    this.websocket.onmessage = this.websocketclose;
  },
  methods:{
     initWebSocket() {
      //初始化weosocket
      const wsuri = "ws://127.0.0.1:8000/ws/chat/" + this.chat.chat_id + '/';
      this.websock = new WebSocket(wsuri);
      
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onmessage = this.websocketonmessage;
    },
    websocketonopen() {
      console.log("message WebSocket连接成功");
      //心跳检测重置
      //this.heartCheck.reset().start();
    },
    websocketonmessage(e) {

      console.log('接收消息',e.data)

      let data = eval("(" + e.data + ")"); //解析对象
      const redata = JSON.parse(e.data); //数据接收

      this.message_list.push(data)

      // 缓存消息
      var div = document.getElementById('msg');
      div.innerHTML = div.innerHTML;
      div.scrollTop = div.scrollHeight;
      // localStorage.setItem(chat, JSON.stringify(chat_message))
    },
    Send_message() { // 数据发送
      if(!this.message){
        return
      }
      let data = {
        chat_id : this.chat.chat_id,
        id: 2,
        nickname: this.user.nickname,
        avatar_url: this.user.avatar_url,
        message: this.message,
      }
      this.message = null;
      try {
        this.websocket.send(JSON.stringify(data));
      } catch (err) {
        console.log("send failed (" + err.code + ")");
      }
    },
    websocketonerror() {
      //连接建立失败重连
      console.log('连接失败')
      this.initWebSocket();
    },
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
    },
  }
};
</script>

<style>
.message_list{
  height: calc(100vh - 99px);
  overflow-x: hidden;
  overflow-y: scroll;
}
#msg{
  overflow:auto;
}
.message_show{
  padding: 2vw;
  overflow: hidden;
}

.message_avatar_url{
  float: left;
  width: 10vw;
  height: 10vw;
  border-radius: 1vw;
}
.message_user_desc{
  float: left;
  max-width: calc(100% - 21vw);
  padding: 2vw;
}
.message_user_nickname{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.message_content{
  padding: 2vw 2vw 2vw 3vw;
  color: #969799;
  line-height: 5vw;
  font-size: 4vw;
  background-color: #f9f9f9;
  border-radius: 1vw;
}


.send_message_avatar_url{
  float: right;
  width: 10vw;
  height: 10vw;
  border-radius: 1vw;
}
.send_message_user_desc{
  float: right;
  max-width: calc(100% - 21vw);
  padding: 2vw;
}
.send_message_user_nickname{
  float: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.send_message_content{
  clear: both;
  padding: 2vw 3vw 2vw 2vw;
  color: #969799;
  line-height: 5vw;
  font-size: 4vw;
  background-color: #f9f9f9;
  border-radius: 1vw;
}


.message_send{
  position: fixed;
  bottom: 0px;
  width: 100%;
  border-top: 1px solid #ebedf0;
}
</style>